<template>
  <div>
    <div class="navs"></div>
    <div class="nav" >
        <div class="nav1" @click="toHome">
            <img src="https://gw.alicdn.com/imgextra/i1/O1CN01FY0a921FVNZRTEGvQ_!!6000000000492-2-tps-42-76.png_.webp?getAvatar=avatar"
                alt="">
        </div>
        <div class="box1" >
            <img src="https://gw.alicdn.com/imgextra/i4/O1CN01c97Ud01xjQoJKdW29_!!6000000006479-2-tps-123-40.png"
                alt="">
            <img src="https://gw.alicdn.com/imgextra/i2/O1CN01Iw44ry20L6cUfEVq5_!!6000000006832-2-tps-134-40.png"
                alt="">
        </div>
    </div>
    <div class="navBox" :class="nb">
        <span :class="{fc:index1==index}" v-for="(v,index) in navArr" :key="index" @click="changepage(index)">{{ v.msg }}</span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {
    data(){
        return{
           
        }
    },
    props: ["navArr","index1","nb"],
    methods:{
        toHome(){
            this.$router.push("/")
        },
        
        changepage(index){
            this.$emit('update:index1',index)
            this.$emit('update:flag', index)
        }
    },
    mounted(){
        
    }
}
</script>

<style scoped>
.navs {
    width: 100%;
    height: 1.08rem;
}

.nav {
    width: 100%;
    height: 1.08rem;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 100;
    background: #22aafe;
}

.navnew {
    background-color: #f84271;
}

.nav .nav1 {
    width: 40px;
    height: 100%;
    /* margin-left: 10px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav .nav1 img {
    width: 10.5px;
    height: 19px;
}

.nav .box1 {
    flex: 1;
    display: flex;
    align-items: center;
}

.nav .box1 img:nth-child(1) {
    width: 62.03px;
    height: 20.5px;
}

.nav .box1 img:nth-child(2) {
    width: 68..5px;
    height: 20.5px;
    margin-left: 10px;
}
.navBox{
    width: 100%;
    height: 48px;    
    background: #22aafe;
    display: flex;
    justify-content: space-around;   
    position: fixed;
    top: 0;
    transition: all 0.5s linear;
}
.navBox span{
    width: 20%;
    height: 30px;
    border-radius: 15px;
    background: #4ab9fe;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
}
.nb{
    top:54px;
    z-index: 10;
}
.navBox .fc{
    background: #fff;
    color: #22aafe;
}
</style>